<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户借书记录</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3329812_51kbpsk6cya.css">
    <!-- 引入jquery -->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="./css/background/user-returnbooks.css">
    <script src="./js/background/user-returnbooks.js"></script>
</head>

<body>
    <!-- 左边的大导航栏 -->
    <div class="feature">
        <p>图书管理后台</p>
        <!-- 管理员信息 -->
        <div class="administrator">
            <div class="avatar">
                <img src="./imgs/imgs10.jpeg">
                <div class="administrator-detail">
                    <a href="#">超级管理员</a>
                    <a href="#"><i class="iconfont icon-yuandian common"></i>在线</a>
                </div>
            </div>
        </div>
        <!-- 导航栏-功能 -->
        <div class="menu-list">
            <ul>
                <li class="first-menu"><a href="./homepage.html"><i class="iconfont icon-zhuye common"></i>主页</a>
                </li>
                <li class="first-menu"><a href="javascript:;" class="displays"><i
                            class="iconfont icon-xitong common"></i>系统管理
                        <i class="iconfont icon-jiantouxia"></i></a>
                    <ul class="display-ul">
                        <li class="second-menu"><a th:href="@{/systemctrol}">图书管理</a></li>
                    </ul>
                </li>

                <li class="first-menu"><a href="javascript:;" class="displays1" id=""><i
                            class="iconfont icon-jiaose common"></i>角色管理
                        <i class="iconfont icon-jiantouxia"></i></a>
                    <ul class="display-ul1">
                        <li class="second-menu"><a th:href="@{/userInformation}">用户角色</a></li>
                        <li class="second-menu"><a th:href="@{/history}">用户借书记录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <!-- 退出登录-弹框遮盖层 -->
    <div class="container-log">
        <!-- 弹出框 -->
        <div class="leave">
            <p>是否退出登录？</p>
            <button class="dump-common certain">确定</button>
            <button class="dump-common cancel">取消</button>
        </div>
    </div>

    <!-- 右边内容 -->
    <div class="right-nav">
        <!-- 顶部导航信息 -->
        <div class="information">
            <a href="#" class="information-user">超级用户<i class="iconfont icon-jiantouxia"></i>
                <ul class="list">
                    <li class="out">退出登录</li>
                </ul>
            </a>
            <a href="#"><i class="iconfont icon-shezhi1"></i></a>
        </div>

        <!-- 中间部分 -->
        <div class="center">
            <!-- 二级菜单提示 -->
            <div class="title">
                <p><i class="iconfont icon-ziliaoku-shuji"></i>角色管理>用户借书记录</p>
            </div>

            <!-- 删除-弹框遮盖层 -->
            <div class="container">
                <!-- 弹出框 -->
                <div class="dump">
                    <p>是否删除该书籍？</p>
                    <button class="dump-common decision">确定</button>
                    <button class="dump-common vanish">取消</button>
                </div>
            </div>
            <!-- 遮盖层-确定按钮成功弹框 -->
            <div class="success-tip">
                <p><i class="iconfont icon-chenggong"></i>删除成功！</p>
            </div>
            <!-- 遮盖层-确定按钮失败弹框 -->
            <div class="failure-tip">
                <p><i class="iconfont icon-shibai"></i>删除失败！</p>
            </div>

            <!--搜索框-->
            <div class="reserach">
                <input type="text" class='research-text' placeholder="搜索"/>
                <button class='research-submit'>搜索</button>
            </div>


            <!-- 表单 -->
            <div class="importants">
                <table border="1" cellpadding="0" cellspacing="0" class="tables">
                    <!-- 表头 -->
                    <tr class="firstTr">
                        <th width="5%" class="displayid">用户id</th>
                        <th width="10%">用户名</th>
                        <th width="10%">书名</th>
                        <th width="10%">作者</th>
                        <th width="12%">借书时间</th>
                        <th width="12%">还书时间</th>
                        <th width="12%">结束时间</th>
                        <th width="10%">是否归还</th>
                        <th width="15%">操作</th>
                    </tr>
<!--                    <c:forEach var="news" items="${newslist}" varStatus="status">-->
                    <tbody id="realist">

                    </tbody>
<!--                        <tr class="realitic-content">-->
<!--                            <td class="displayid">-->
<!--                                ${news.id }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.userName }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.bookName }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.author }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.borrowBook }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.returnBook }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.isreturnBook }-->
<!--                            </td>-->
<!--                            <td class="functional-borrow">-->
<!--                                <button class="edit sames" title="编辑" type="button"> 编辑</button>-->
<!--                                <button class="detail sames" title="详细" type="button"> 详请</button>-->
<!--                                <button class="delete sames" title="删除" type="button"> 删除</button>-->
<!--                            </td>-->

<!--                        </tr>-->
<!--                        <tr class="realitic-content">-->
<!--                            <td class="displayid">-->
<!--                                ${news.id }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.userName }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.bookName }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.author }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.borrowBook }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.returnBook }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.isreturnBook }-->
<!--                            </td>-->
<!--                            <td class="functional-borrow">-->
<!--                                <button class="edit sames" title="编辑" type="button"> 编辑</button>-->
<!--                                <button class="detail sames" title="详细" type="button"> 详请</button>-->
<!--                                <button class="delete sames" title="删除" type="button"> 删除</button>-->
<!--                            </td>-->
<!--                        </tr>-->
<!--                    </c:forEach>-->
                </table>


            </div>
            <div class="proceeding">

            </div>

            <div class="page-normal">
                <!--                    <span class="page-prev">&lt;</span>-->
                <!--                     数字1 代表当前页面-->
                <!--                    <a class="page-current">1</a>-->
                <!--                    <a href="#">2</a>-->
                <!--                    <a href="#">3</a>-->
                <!--                    <a href="#">&gt;</a>-->
            </div>
        </div>
    </div>
</body>

</html>